<template>
  <el-cascader
    v-model="cid"
    :options="options"
    :props="{
                 expandTrigger: 'hover',
                 checkStrictly: true,
                 emitPath:false}"
    :show-all-levels="true"
    @change="doChange"
    clearable
  >
    <!-- <template slot-scope="{ node, data }">
      <span>{{ data.label }}</span>
      <span v-if="!node.isLeaf">({{ data.children.length }})</span>
    </template> -->
  </el-cascader>
</template>

<script>
export default {
  name: "CategoryChooser",
  data(){
      return{
        cid:""
      }
  },
  props: {
    categories: Array
  },
  computed: {
    options() {
      if (this.categories.length > 0) {
        let ops = this.categories
          .filter(t => t.parentId == null)
          .map(t => {
            return {
              value: t.id,
              label: t.name
            };
          });
        ops.forEach(t => this.findChildren(t));
        return ops;
      }
    }
  },
  methods: {
      doChange(){
          this.$emit('changeCate',this.cid)
      }
      ,
    // 寻找子节点
    findChildren(cate) {
      // alert(this.categories)
      let children = this.categories.filter(t => t.parentId == cate.value);

      if (children != null && children.length > 0) {
        children = children.map(t => {
          return {
            value: t.id,
            label: t.name
          };
        });
        children.forEach(t => this.findChildren(t));
        cate.children = children;
      }
    }
  }
};
</script>

<style>
</style>